<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>codefun</title>
    <link rel="stylesheet" href="../../index.css" />
    <link rel="stylesheet" href="invoice0.css" />
    
    <style>  
        .popup {  
            display: none;
            position: absolute;
            top: 50%;  
            left: 40%;
            transform: translate(-50%, -50%);  
            width: 35rem;
            padding: 20px;  
            background-color: #b2adad;
            border: 3px solid #383535;
            border-radius: 60px;
        }
        .form1{
            margin-left: 5rem;

        }
        .box{
            display: flex;
            flex-direction: column;

        }

        .box2{
            display: flex;
            flex-direction: column;
            width: auto;
            height: auto;
            padding: 0 5rem;
        }
        .input1{
            position: relative;
            display: block;
            float: right;
            border: none;
            border-radius: 13px;
            font-weight: bold;
            width: 20rem;
            height: 2rem;
            padding: 8px;


        }
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #88827f;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 14px;
            padding: 15px;
            width: 4rem;
            height: 2rem;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
            line-height: 6px;
            vertical-align:middle;
        }
        .buttonoff {
            display: inline-block;
            border-radius: 45px;
            background-color: #2f2d2d;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 14px;
            padding: 2px;
            width: 2rem;
            height: 2rem;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
            line-height: 3px;
            vertical-align:middle;

        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .button:hover span {
            padding-right: 25px;
        }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }

    </style>  
    <script>
        // window.onload = function () {
        //     let box1 = document.getElementById("box1");
        //
        //     box1.onmousedown = function (e) {
        //         console.log(e.clientX, box1.offsetLeft);
        //         //div的偏移量.clientX - 元素.offeetLeft
        //         let ol = e.clientX - box1.offsetLeft;
        //         let ot = e.clientY - box1.offsetTop;
        //
        //         // 给document绑定一个onmousemove事件
        //         document.onmousemove = function (event) {
        //             event = event || window.event;
        //             let left = event.clientX - ol;
        //             let top = event.clientY - ot;
        //
        //             //修改box1的位置
        //             box1.style.left = left + "px";
        //             box1.style.top = top + "px";
        //         };
        //
        //         document.onmouseup = function () {
        //             document.onmousemove = null;
        //
        //             document.onmouseup = null;
        //         };
        //     };
        // };
        function hideCustomDialog0() {
            document.getElementById("myForm0").style.display = "none";
            location.reload(); // 刷新页面
        }
        function hideCustomDialog() {
            document.getElementById("popup").style.display = "none";
            location.reload(); // 刷新页面
        }

        document.addEventListener("DOMContentLoaded", function() {  
    document.getElementById("openPopup").addEventListener("click", function() {    
        document.getElementById("popup").style.display = "block";  
    });  
      document.getElementById("myForm").addEventListener("submit", function(event) {  
    event.preventDefault(); // 阻止表单默认提交行为  
  
    // 获取表单数据和文件对象  
    var name = document.getElementById("name").value;  
    var price = document.getElementById("Price").value;  
    var describe = document.getElementById("Describe").value;  
    var fileInput = document.getElementById("fileInput"); 
    var file = fileInput.files[0];// 获取文件对象  

          // 检查所有字段是否为空
          if (!name || !price || !describe || !file) {
              alert("名称、定价、描述和文件都不能为空！");  // 如果任何一个字段为空，弹出提示框
              return false;  // 阻止表单提交
          }

          // 创建FormData对象并添加文件数据
    var formData = new FormData();  

    formData.append("name", name);  
    formData.append("price", price);  
    formData.append("describe", describe);  
    formData.append("file", file); // 将文件对象添加到FormData中  
  
    // 发送Ajax请求到后端接口  
    var xhr = new XMLHttpRequest();  
    xhr.open("POST", "http://localhost:8080/form", true); //

    xhr.onreadystatechange = function() {  
      if (xhr.readyState === 4 && xhr.status === 200) {  
        // 请求成功处理逻辑，可以在这里处理后端返回的数据
          alert("提交成功！");  // 成功时弹出提示窗口
          hideCustomDialog()
        console.log(xhr.responseText); // 在控制台打印返回的数据  
      } else if (xhr.readyState === 4) {  
        // 请求失败处理逻辑，可以在这里处理错误情况
          alert("提交失败,请重新提交" );  // 失败时弹出提示窗口
        console.error("请求失败：" + xhr.responseText); // 在控制台打印错误信息  
      }  
    };  
    xhr.send(formData); // 发送请求，携带FormData数据  
  });  
});
        function handleButtonClick(data) {
            var b = data;
            console.log(b); // 输出值到控制台
            var values = b.split(",");
            console.log(values);
            var pID0 = values[0]; // 1
            var name0 = values[2].trim(); // 洗头
            var describe0 = values[4].trim(); // 简单的洗头

            var ImageURL0 = values[5]; // http://localhost:8080/price/理发1.png
            var price0 = values[3]; // 35

            // 设置表单输入框的默认值为按钮传递的值
            document
                .getElementById("imageButton")
                .addEventListener("click", function () {
                    var imageSrc = ImageURL0; // 获取图片URL
                    document.getElementById("imageDisplay").style.display = "block"; // 显示图片
                    document.getElementById("imageDisplay").src = imageSrc; // 设置图片的源为输入的图片URL
                });
            document
                .getElementById("closeButton")
                .addEventListener("click", function () {
                    document.getElementById("imageDisplay").style.display = "none"; // 隐藏图片
                });
            document.getElementById("formInput2").value = name0;
            document.getElementById("formInput3").value = describe0;
            document.getElementById("formInput5").value = price0;

            // 显示表单
            var myForm = document.getElementById("myForm0");
            myForm.style.display = "block";
            // var pID0 = document.getElementById("pID0").value;
            // var name0 = document.getElementById("name0").value;
            // var describe0 = document.getElementById("describe0").value;
            // var price0 = document.getElementById("price0").value;
            // var fileInput0 = document.getElementById("fileInput0");
            var file = fileInput0.files[0]; // 获取文件对象
            // 在这里你可以使用这些值来构建一个POST请求，并通过Ajax发送它。下面是一个简单的示例：
            // 注意：这只是一个示例，你需要根据你的后端API来构造和发送POST请求。
            document
                .getElementById("myForm0")
                .addEventListener("submit", function (event) {
                    event.preventDefault(); // 阻止表单默认提交行为

                    // 获取表单数据和文件对象
                    var pID = pID0;
                    var name = document.getElementById("formInput2").value;
                    var price = document.getElementById("formInput5").value;
                    var describe = document.getElementById("formInput3").value;
                    var fileInput = document.getElementById("fileInput0");
                    var file = fileInput.files[0]; // 获取文件对象

                    // 检查所有字段是否为空
                    if (!name || !price || !describe || !file) {
                        alert("名称、定价、描述和文件都不能为空！"); // 如果任何一个字段为空，弹出提示框
                        return false; // 阻止表单提交
                    }
                    // 创建FormData对象并添加文件数据
                    var formData = new FormData();
                    formData.append("pID", pID);
                    formData.append("name", name);
                    formData.append("price", price);
                    formData.append("describe", describe);
                    formData.append("file", file); // 将文件对象添加到FormData中
                    // 发送Ajax请求到后端接口
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", "http://localhost:8080/UpdataPrice", true); // 将 "your-backend-url" 替换为您的后端接口URL
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            // 请求成功处理逻辑，可以在这里处理后端返回的数据
                            alert("提交成功！"); // 成功时弹出提示窗口
                            hideCustomDialog();
                            location.reload(); // 刷新页面
                            console.log(xhr.responseText); // 在控制台打印返回的数据
                        } else if (xhr.readyState === 4) {
                            // 请求失败处理逻辑，可以在这里处理错误情况
                            alert("提交失败,请重新提交"); // 失败时弹出提示窗口
                            console.error("请求失败：" + xhr.responseText); // 在控制台打印错误信息
                        }
                    };
                    xhr.send(formData); // 发送请求，携带FormData数据
                });
        }
        // function hideCustomDialog() {
        //
        //     document.getElementById("popup").style.display = "none";
        //     location.reload(); // 刷新页面
        // }
        function get() {
            // 使用JavaScript的fetch API发送HTTP请求获取数据
            fetch('http://localhost:8080/price') //
                .then(response => response.json())
                .then(data => {
                    // 将获取到的数据添加到HTML页面中的列表元素中
                    const blogList = document.getElementById('blogList');
                    const plot =document.getElementById('plot');
                    // 将 JSON 对象转换为一个数组
                    const dataArray = Object.values(data);
                    console.log(dataArray[2].length);

                    console.log(dataArray[2]);
                     const div2= document.createElement('div2');
                    dataArray[2].forEach(blog => {
                        // const pID = blog.pID;
                        // console.log(pID);
                        const blog1 = Object.values(blog);
                        console.log(blog1);
                        const div1 = document.createElement('div1');
                        const length = dataArray[2].length;
                        console.log(blog.imageURL);

                        div1.innerHTML = `        <div class="flex-row justify-between items-center group_11">
              <div class="flex-row items-center space-x-16">
                <div class="flex-col justify-start items-center text-wrapper_4">
                      <img
                      class="shrink-0 image_8"
                      src="${blog.imageURL}"
                    /></div>
                <div class="flex-col items-start group_12 space-y-10">
               
                  <span class="font_6 text_12">${blog.name}</span>
                  
                  <span class="font_10 text_14">${blog.describe}</span>
                </div>
              </div>
              <div class="flex-row items-center group_13 space-x-108">
                <span class="font_8 text_13">  ${blog.price}元</span>

                <div class="flex-row items-center shrink-0 space-x-92">
               <button style="margin-left: rem" class="bb"onclick="handleButtonClick('${blog1}')">
                  <div class="flex-col justify-start items-center text-wrapper_5"><span class="font_9">change</span></div>
               </button>

                </div>
              </div>
            </div>`; 
            // 注意这里改为遍历data数组并访问每个博客对象的属性
                        div2.innerHTML = `      <div class="flex-col justify-start items-center shrink-0 text-wrapper_3">
                <span class="font_5 text_7">${length}</span>`;
                        blogList.appendChild(div1);
                        plot.appendChild(div2);
                    });
                })
                .catch(error => {
                    console.error("Failed to fetch blogs:", error);
                });
        }
        get(); // 调用函数以发送请求并填充数据
    </script>
  </head>
  <body>
    <div class="flex-row page">

      <div class="flex-col flex-auto self-start space-y-31">

        <div class="flex-col group_6">
          <div class="flex-row justify-between items-center group_7">
            <div class="flex-row items-center space-x-8">
              <span class="text_6">Invoice</span>
                <ul id="plot"></ul>

              </div>
            </div>
            <div class="flex-row space-x-38">
              <div class="flex-row items-center section_4 space-x-16">
                <img
                  class="image_5"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273103809872555.png"
                />
                <input  style="border: none" placeholder="查找" class="font_1">
              </div>

              <button id="openPopup" class="flex-col justify-start items-start text-wrapper_2">
                <span class="font_6 text_8">create new Price</span>
              </button>

    <div draggable="true" id="popup" class="popup">
        <div style="height: auto;width: auto">
            <button class="buttonoff" onclick="hideCustomDialog()">X</button>
        </div>
        <form class="form1" id="myForm">
            <div class="box">

                <input class="input1" style="" placeholder="请输入名称" type="text" id="name" name="name"><br>
                <label style="margin-top: -1rem" for="name">名称不能为空</label><br>
            </div>
            <div class="box">

                <input class="input1" style="" placeholder="请输入定价" type="text" id="Price" name="Price"><br>
                <label style="margin-top: -1rem" for="Price">定价不能为空</label><br>
            </div>
            <div class="box">

                <input class="input1" style="" placeholder="请输入描述" type="text" id="Describe" name="Describe"><br>
                <label style="" for="Describe"></label><br>
            </div>
          <label for="file">文件:</label><br>  
          <input class="" type="file" id="fileInput" name="file"><br><br>
          <input class="button" type="submit" value="提交"><!--<button onclick="hideCustomDialog()">关闭</button>-->
          </form>
    </div>
           <div id="myForm0" class="popup" style="display: none">
               <button class="buttonoff" onclick="hideCustomDialog0()">X</button>
                        <form style="">
                            <div class="box2">

                                <input
                                        class="input1"
                                        type="text"
                                        id="formInput2"
                                        value=""
                                        defaultContent="name0"
                                /><br />
                                <label style="padding-left: 0.5rem;margin-top: -1rem">修改名称</label><br />
                            </div>
                            <div class="box2">
                                <input
                                        class="input1"
                                        type="text"
                                        id="formInput3"
                                        value=""
                                        defaultContent="describe0"
                                /><br />
                                <label style="padding-left: 0.5rem;margin-top: -1rem">修改描述</label><br />
                            </div>
                            <div class="box2">
                                <input
                                        class="input1"
                                        type="text"
                                        id="formInput5"
                                        value=""
                                        defaultContent="price0"
                                /><br />
                                <label style="padding-left: 0.5rem;margin-top: -1rem">修改价格</label><br />
                            </div>
                            <div class="box2">
                                <label for="file">文件</label><br />
                                <input
                                        type="file"
                                        id="fileInput0"
                                        value=""
                                        defaultContent="fileInput0"
                                /><br /><br />
                            </div>

                            <img style="position: fixed;width: 17rem;margin: -24rem 6rem" id="imageDisplay" src="" style="display: none" />
                            <button style="margin: 0 16rem;margin-top: -8.5rem" class="button" type="submit">提交</button>
                        </form>

                        <div style="display: flex;flex-direction: row;margin: 0 5rem;margin-top: -3rem">
                            <button class="button" style="width: 6rem;font-size: 11px" type="button" id="imageButton">预览当前图片</button>
                            <button class="button" style="width: 5rem;font-size: 11px" type="button" id="closeButton">关闭图片</button>
                        </div>
           </div>
 
            </div>
          </div>
          <div class="flex-col section_5">
            <div class="flex-row justify-between group_6">
              <span class="font_5 text_10">CLIENT</span>
              <div class="flex-row group_10 space-x-98">
                <div class="flex-row shrink-0 space-x-84">
                  <span class="font_5 text_10">PRICE</span>
                  <span class="font_5 text_10">STATUS</span>
                </div>
              </div>
            </div>
              <ul id="blogList"></ul>

          </div>
        </div>
      </div>

  </body>
</html>